<template>
  <view class="throw-bottle-modal" v-if="show" :class="{'modal-show': show}">
    <!-- 发光背景 -->
    <view class="modal-glow" :style="effectStyle"></view>

    <!-- 模糊背景 -->
    <view class="modal-backdrop" @tap.stop="onClose"></view>

    <!-- 内容容器 -->
    <view class="modal-container" :class="{'male-theme': userGender === 'male', 'female-theme': userGender === 'female'}" @tap.stop>
      <!-- 关闭按钮 -->
      <view class="close-btn" @tap="onClose">×</view>

      <!-- 魔法效果 -->
      <view class="modal-magic-effects">
        <view class="floating-star" v-for="i in 10" :key="i"></view>
        <view class="magic-light"></view>
      </view>

      <!-- 头部：扔漂流瓶标题 -->
      <view class="modal-header">
        <!-- 漂流瓶图标 -->
        <view class="modal-bottle-icon">
          <view class="mini-bottle">
            <view class="mini-bottle-neck"></view>
            <view class="mini-bottle-body"></view>
            <view class="mini-bottle-shine"></view>
          </view>
        </view>

        <!-- 标题 -->
        <view class="title-container">
          <view class="title">扔一个漂流瓶</view>
          <view class="subtitle">写下你想传达的信息，让它漂向远方...</view>
        </view>
      </view>

      <!-- 输入区域 -->
      <view class="modal-content">
        <view class="content-title">漂流瓶内容</view>

        <!-- 随机文案按钮 -->
        <view class="random-message-btn" @tap="useRandomMessage">
          <view class="random-icon">🎲</view>
          <view class="random-text">随机扔一个</view>
        </view>

        <!-- 文本输入区域 -->
        <view class="input-area">
          <textarea
            class="message-input"
            v-model="bottleMessage"
            placeholder="写下你想说的话，它将漂向未知的远方..."
            maxlength="300"
            :adjust-position="true"
          ></textarea>
          <view class="word-count">{{ bottleMessage.length }}/300</view>
        </view>

        <!-- 隐私提示 -->
        <view class="privacy-tip">
          <view class="tip-icon">ℹ️</view>
          <view class="tip-text">你的漂流瓶可能被任何人发现，请勿包含敏感信息</view>
        </view>
      </view>

      <!-- 操作按钮区域 -->
      <view class="modal-actions">
        <view class="action-btn cancel-btn" @tap="onClose">
          <view class="btn-icon">✕</view>
          <view class="btn-text">取消</view>
        </view>
        <view class="action-btn throw-btn" @tap="onThrow" :class="{'disabled': !isValid}">
          <view class="btn-icon">🌊</view>
          <view class="btn-text">扔向大海</view>
        </view>
      </view>
    </view>

    <!-- 添加订阅消息组件 -->
    <BottleSubscribe
      :show.sync="showSubscribe"
      :bottle-content="bottleMessage"
      @success="onSubscribeComplete"
    />
  </view>
</template>

<script>
import { createBottle } from '@/api/feed/bottle.js';
import BottleSubscribe from '@/components/subscribe/bottle/index.vue'; // 导入订阅消息组件
import SubscribeManager, { STORAGE_KEYS } from '@/utils/subscribe-manager.js'; // 导入订阅管理工具类

export default {
  name: "ThrowBottleModal",
  components: {
    BottleSubscribe // 注册订阅消息组件
  },
  props: {
    // 控制弹窗显示
    show: {
      type: Boolean,
      default: false
    },
    // 用户性别，用于主题
    userGender: {
      type: String,
      default: 'male' // 'male' 或 'female'
    },
    // 特效样式
    effectStyle: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      bottleMessage: '', // 漂流瓶消息内容
      isSubmitting: false, // 添加提交状态控制
      showSubscribe: false, // 控制订阅消息弹窗显示
      // 预设的随机文案数组
      randomMessages: [
        "今天的天空很美，可惜身边没人分享，你愿意陪我聊聊天吗？",
        "如果你捡到这个漂流瓶，请告诉我你最近发生的一件开心的事",
        "你相信缘分吗？这个漂流瓶漂到你手里，或许就是一种缘分",
        "如果可以去任何地方旅行，你会选择哪里？为什么？",
        "假如你有一天自由时间，你最想做什么？",
        "你有没有一个梦想，一直藏在心里没有实现？",
        "分享一个你最喜欢的电影或书籍，让我了解你的世界",
        "如果此生只能吃一种美食，你会选择什么？",
        "你有什么特殊的才能或爱好，是别人不太了解的？",
        "如果可以和历史上的任何人共进晚餐，你会选择谁？",
        "今天心情不太好，能给我讲个笑话或有趣的事情吗？",
        "你最近学到了什么新东西？能分享一下吗？",
        "我刚刚看了一部很棒的电影，但没人可以讨论，你喜欢看电影吗？",
        "如果你可以拥有一种超能力，你会选择什么？为什么？",
        "你觉得幸福是什么？能分享你的定义吗？",
        "最近有什么好听的歌推荐吗？我想扩展一下我的歌单",
        "你认为人生中最重要的三件事是什么？",
        "如果让你形容自己，你会用哪三个词？",
        "你有什么人生格言或座右铭一直激励着你吗？",
        "如果生活是一本书，你现在正在哪一章？这一章的标题是什么？",
        "在这个城市里，有什么隐藏的美食或景点值得推荐？",
        "你有没有一个瞬间，觉得世界突然安静下来，只剩下你和你的思绪？",
        "如果你的生活是一首歌，它的旋律会是什么样的？",
        "你能用一句话形容你昨天的一天吗？",
        "我总觉得生活缺少了点什么，你呢？你觉得完整的生活需要什么？",
        "最近读到一句话：'最好的旅行，是遇见另一个自己'。你觉得呢？",
        "如果可以和过去的自己说一句话，你会说什么？",
        "你相信命运吗？还是认为一切都是自己的选择？",
        "如果你的人生可以重来一次，你会做出什么不同的选择？",
        "在你的人生中，有没有一个陌生人给你留下深刻的印象？",
        "你有没有一个珍藏的秘密，想要和陌生人分享？",
        "我喜欢在雨天听音乐，你呢？你有什么特别的小习惯？",
        "如果世界末日只剩下24小时，你会怎么度过？",
        "你最欣赏自己的哪一点？为什么？",
        "我正在学习一门新技能，但有点困难。你有什么学习新事物的好方法吗？",
        "你有没有一个地方，每次去都能让你感到平静和快乐？",
        "今天我做了一个奇怪的梦，你最近有做什么有趣的梦吗？",
        "你觉得人与人之间最重要的是什么？诚实、信任还是理解？",
        "如果你的生活是一部电影，你希望谁来做导演？为什么？",
        "你有没有一个时刻，让你对生活有了全新的认识？",
        "如果可以和任何动物交谈，你会选择和哪种动物聊天？",
        "我有时候会想，我们真的了解自己吗？你觉得你了解真实的自己吗？",
        "什么事情总能让你会心一笑，无论心情多糟糕？",
        "如果你可以穿越到任何时代，你会去哪个时代？为什么？",
        "你认为友情和爱情的界限在哪里？它们是否能够共存？",
        "你觉得社交媒体让人们更亲近了，还是更疏远了？",
        "如果你的生活有背景音乐，你希望是什么风格的？",
        "我常常想知道其他人的日常是什么样的，你的一天通常是怎么度过的？",
        "如果你可以把任何一种情绪装在瓶子里送给他人，你会选择什么情绪？",
        "最近有什么让你感到特别感动或惊喜的事情吗？"
      ]
    }
  },
  computed: {
    // 判断内容是否有效
    isValid() {
      return this.bottleMessage.trim().length > 0 && !this.isSubmitting;
    }
  },
  methods: {
    // 关闭弹窗
    onClose() {
      this.resetForm();
      this.$emit('close');
    },

    // 扔漂流瓶
    onThrow() {
      if (!this.isValid) return;

      // 设置提交状态
      this.isSubmitting = true;

      // #ifdef MP-WEIXIN
      // 检查是否已订阅
      if (SubscribeManager.isSubscribed(STORAGE_KEYS.POST.SUBSCRIBED)) {
        // 已订阅用户，执行静默订阅续期，并在回调中处理跳转
        SubscribeManager.silentSubscribe(
            'POST_ALL',
            STORAGE_KEYS.POST.SUBSCRIBED,
            STORAGE_KEYS.POST.SUBSCRIBE_TIME,
            STORAGE_KEYS.POST.LAST_PROMPT,
            (result) => {

              // 只有订阅成功接受的情况下才执行跳转
              if (result && result.accepted) {
                // 发送漂流瓶
                this.sendBottle();
              } else if (result && result.rejected) {
                // 用户拒绝了订阅，引导用户去设置页面开启权限（已在封装里面处理）
              } else {
                // 发送漂流瓶
                this.sendBottle();
              }
            }
        );
      } else {
        // 未订阅用户，检查是否需要显示提示
        if (SubscribeManager.shouldShowPrompt(STORAGE_KEYS.POST.SUBSCRIBED, STORAGE_KEYS.POST.LAST_PROMPT, 'POST')) {
          // 记录提示时间
          SubscribeManager.recordPromptTime(STORAGE_KEYS.POST.LAST_PROMPT);
          // 显示订阅弹窗
          this.showSubscribe = true;
        } else {
          // 今天已提示过，直接发送漂流瓶
          this.sendBottle();
        }
      }
      // #endif

      // 非微信环境直接发送
      // #ifndef MP-WEIXIN
      this.sendBottle();
      // #endif
    },

    // 发送漂流瓶的具体实现
    sendBottle() {
      // 创建漂流瓶数据
      const bottleData = {
        content: this.bottleMessage,
        type: 1, // 1表示文字类型
        isAnonymous: false, // 默认不匿名
        location: '', // 可以通过定位获取，暂时留空
        tag: '心情' // 默认标签
      };

      // 调用API发送漂流瓶
      createBottle(bottleData).then(res => {
        // 发送成功后通知父组件
        this.$emit('throw', bottleData);
		// 通过Vuex刷新用户信息
		this.$store.dispatch('user/getUserInfo');

        // 显示成功提示
        uni.showToast({
          title: '漂流瓶已扔出',
          icon: 'success',
          duration: 2000
        });

        // 重置表单并关闭
        this.resetForm();
      }).catch(error => {
        // 处理错误情况
        console.error('发送漂流瓶失败:', error);

		if(error.code === 1004001400){
      // 显示解锁弹窗，而不是直接显示VIP弹窗
      // this.$emit('showUnlockBottle');
			// 直接显示VIP弹窗，不再显示解锁弹窗
      uni.showModal({
        title: '会员特权',
        content: error.msg,
        showCancel: false,
        success: (res) => {
          if (res.confirm) {
            // 显示VIP弹窗
            this.$emit('openVip');
          }
        }
      });
			// 关闭当前弹窗
			this.$emit('close');
		}else{
			uni.showToast({
			  title: error.msg,
			  icon: 'none',
			  duration: 2000
			});
		}

      }).finally(() => {
        // 无论成功失败都重置提交状态
        this.isSubmitting = false;
      });
    },

    // 订阅弹窗完成回调
    onSubscribeComplete() {
      // 已订阅用户，执行静默订阅
      SubscribeManager.silentSubscribe(
          'POST_ALL',
          STORAGE_KEYS.POST.SUBSCRIBED,
          STORAGE_KEYS.POST.SUBSCRIBE_TIME,
          STORAGE_KEYS.POST.LAST_PROMPT,
          (result) => {
            // 关闭弹窗
            this.showSubscribe = false;

            if (result && result.accepted) {
              // 订阅流程完成后，继续发送漂流瓶
              this.sendBottle();
            } else if (result && result.rejected) {
              // 用户拒绝了订阅，引导用户去设置页面开启权限（已在封装里面处理）
            } else {
              // 其他情况，完成订阅流程后返回
              this.sendBottle();
            }
          }
      );
    },

    // 重置表单
    resetForm() {
      this.bottleMessage = '';
      this.isSubmitting = false;
    },

    // 使用随机文案
    useRandomMessage() {
      // 从预设文案中随机选择一个
      const randomIndex = Math.floor(Math.random() * this.randomMessages.length);
      this.bottleMessage = this.randomMessages[randomIndex];

      // 添加震动反馈
      uni.vibrateShort({
        success: function () {
          console.log('震动成功');
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
/* 漂流瓶内容弹窗样式 */
.throw-bottle-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;

  &.modal-show {
    opacity: 1;
    pointer-events: auto;
  }

  /* 发光背景 */
  .modal-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
      circle at var(--effect-center-x, 50%) var(--effect-center-y, 50%),
      var(--effect-color, #B3F73C) 0%,
      rgba(0, 0, 0, 0) 70%
    );
    opacity: 0.5;
    animation: pulse-slow 3s ease-in-out infinite alternate;
  }

  /* 模糊背景 */
  .modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
  }

  /* 内容容器 */
  .modal-container {
    position: relative;
    width: 90%;
    max-width: 600rpx;
    max-height: 85vh;
    background: rgba(20, 20, 20, 0.85);
    border-radius: 30rpx;
    padding: 40rpx 30rpx;
    box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: modal-float 0.5s ease forwards;
    border: 2rpx solid var(--primary-color, #409EFF);
    display: flex;
    flex-direction: column;

    /* 男性主题 */
    &.male-theme {
      --theme-color: #409EFF;
      --theme-color-light: #64BAFF;
      --theme-gradient: linear-gradient(135deg, #409EFF, #64BAFF);
    }

    /* 女性主题 */
    &.female-theme {
      --theme-color: #FF79A8;
      --theme-color-light: #FFB6D2;
      --theme-gradient: linear-gradient(135deg, #FF79A8, #FFB6D2);
    }

    /* 魔法效果 */
    .modal-magic-effects {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .floating-star {
      position: absolute;
      width: 6rpx;
      height: 6rpx;
      background-color: var(--theme-color-light, #64BAFF);
      border-radius: 50%;
      box-shadow: 0 0 8rpx 2rpx var(--theme-color-light, #64BAFF);
      animation: float-star 6s ease-in-out infinite;

      &:nth-child(1) {
        left: 10%;
        top: 15%;
        width: 6rpx;
        height: 6rpx;
        animation-delay: 0.2s;
        animation-duration: 7s;
      }

      &:nth-child(2) {
        left: 25%;
        top: 45%;
        width: 8rpx;
        height: 8rpx;
        animation-delay: 1.5s;
        animation-duration: 9s;
      }

      &:nth-child(3) {
        left: 40%;
        top: 82%;
        width: 5rpx;
        height: 5rpx;
        animation-delay: 0.8s;
        animation-duration: 8s;
      }

      &:nth-child(4) {
        left: 65%;
        top: 30%;
        width: 7rpx;
        height: 7rpx;
        animation-delay: 0.3s;
        animation-duration: 12s;
      }

      &:nth-child(5) {
        left: 85%;
        top: 70%;
        width: 9rpx;
        height: 9rpx;
        animation-delay: 1.2s;
        animation-duration: 6s;
      }

      &:nth-child(6) {
        left: 50%;
        top: 50%;
        width: 10rpx;
        height: 10rpx;
        animation-delay: 0.7s;
        animation-duration: 10s;
      }

      &:nth-child(7) {
        left: 72%;
        top: 12%;
        width: 4rpx;
        height: 4rpx;
        animation-delay: 0.1s;
        animation-duration: 13s;
      }

      &:nth-child(8) {
        left: 33%;
        top: 92%;
        width: 7rpx;
        height: 7rpx;
        animation-delay: 2s;
        animation-duration: 7.5s;
      }

      &:nth-child(9) {
        left: 92%;
        top: 42%;
        width: 6rpx;
        height: 6rpx;
        animation-delay: 0.5s;
        animation-duration: 8.5s;
      }

      &:nth-child(10) {
        left: 15%;
        top: 60%;
        width: 8rpx;
        height: 8rpx;
        animation-delay: 1.8s;
        animation-duration: 9.2s;
      }
    }

    .magic-light {
      position: absolute;
      top: -100rpx;
      left: -100rpx;
      width: 200rpx;
      height: 200rpx;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        var(--theme-color-light, #64BAFF) 0%,
        rgba(255, 255, 255, 0) 70%
      );
      opacity: 0.1;
      animation: magic-light-move 20s linear infinite;
    }

    /* 关闭按钮 */
    .close-btn {
      position: absolute;
      top: 15rpx;
      right: 15rpx;
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      background-color: rgba(50, 50, 50, 0.7);
      color: #FFFFFF;
      font-size: 40rpx;
      line-height: 45rpx;
      text-align: center;
      z-index: 5;

      &:active {
        transform: scale(0.95);
      }
    }

    /* 头部区域 */
    .modal-header {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      position: relative;

      /* 漂流瓶图标 */
      .modal-bottle-icon {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
        position: relative;

        .mini-bottle {
          width: 100%;
          height: 100%;
          position: relative;
          animation: mini-bottle-float 3s ease-in-out infinite;

          .mini-bottle-neck {
            position: absolute;
            top: 10%;
            left: 40%;
            width: 20%;
            height: 20%;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 2rpx;
          }

          .mini-bottle-body {
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 60%;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 5rpx 5rpx 10rpx 10rpx;
          }

          .mini-bottle-body::before {
            content: '';
            position: absolute;
            bottom: 20%;
            left: 10%;
            width: 80%;
            height: 40%;
            background-color: var(--theme-color-light, #64BAFF);
            opacity: 0.6;
            border-radius: 2rpx 2rpx 8rpx 8rpx;
          }

          .mini-bottle-shine {
            position: absolute;
            top: 30%;
            right: 30%;
            width: 10%;
            height: 10%;
            background-color: #FFFFFF;
            border-radius: 50%;
            box-shadow: 0 0 5rpx 2rpx rgba(255, 255, 255, 0.7);
            animation: twinkle 2s ease-in-out infinite;
          }
        }
      }

      /* 标题容器 */
      .title-container {
        flex: 1;

        .title {
          font-size: 32rpx;
          color: #FFFFFF;
          font-weight: bold;
          margin-bottom: 5rpx;
          text-shadow: 0 0 8rpx var(--theme-color, #409EFF);
        }

        .subtitle {
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }

    /* 内容区域 */
    .modal-content {
      flex: 1;
      background-color: rgba(50, 50, 50, 0.5);
      border-radius: 20rpx;
      padding: 20rpx;
      margin-bottom: 30rpx;
      max-height: 55vh;
      overflow-y: auto;

      .content-title {
        font-size: 28rpx;
        color: var(--theme-color-light, #64BAFF);
        margin-bottom: 15rpx;
        display: flex;
        align-items: center;
      }

      .content-title::before, .content-title::after {
        content: '';
        flex: 1;
        height: 1rpx;
        margin: 0 15rpx;
      }

      .content-title::before {
        background: linear-gradient(to right, transparent, var(--theme-color-light, #64BAFF));
      }

      .content-title::after {
        background: linear-gradient(to left, transparent, var(--theme-color-light, #64BAFF));
      }

      /* 随机文案按钮 */
      .random-message-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(30, 30, 30, 0.7);
        border: 1rpx solid rgba(255, 255, 255, 0.1);
        border-radius: 30rpx;
        padding: 10rpx 20rpx;
        margin-bottom: 15rpx;
        transition: all 0.2s;

        .random-icon {
          font-size: 32rpx;
          margin-right: 10rpx;
        }

        .random-text {
          font-size: 26rpx;
          color: var(--theme-color-light, #64BAFF);
        }

        &:active {
          transform: scale(0.98);
          background: rgba(40, 40, 40, 0.7);
        }
      }

      /* 文本输入区域 */
      .input-area {
        position: relative;
        margin-bottom: 30rpx;

        .message-input {
          width: 100%;
          height: 200rpx;
          background-color: rgba(30, 30, 30, 0.5);
          border: 1rpx solid rgba(255, 255, 255, 0.1);
          border-radius: 15rpx;
          padding: 20rpx;
          color: #FFFFFF;
          font-size: 28rpx;
          line-height: 1.5;
          box-sizing: border-box;

          &::placeholder {
            color: rgba(255, 255, 255, 0.3);
          }

          &:focus {
            border-color: var(--theme-color-light, #64BAFF);
            box-shadow: 0 0 10rpx rgba(100, 186, 255, 0.2);
          }
        }

        .word-count {
          position: absolute;
          bottom: 10rpx;
          right: 15rpx;
          font-size: 22rpx;
          color: rgba(255, 255, 255, 0.5);
        }
      }

      /* 隐私提示 */
      .privacy-tip {
        display: flex;
        align-items: center;
        padding: 15rpx;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 10rpx;

        .tip-icon {
          font-size: 28rpx;
          margin-right: 10rpx;
        }

        .tip-text {
          font-size: 22rpx;
          color: rgba(255, 255, 255, 0.6);
          line-height: 1.4;
        }
      }
    }

    /* 操作按钮区域 */
    .modal-actions {
      display: flex;
      justify-content: space-around;

      .action-btn {
        width: 45%;
        height: 80rpx;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        transition: all 0.2s;

        .btn-icon {
          font-size: 36rpx;
          margin-right: 10rpx;
        }

        .btn-text {
          font-size: 30rpx;
        }

        &:active {
          transform: scale(0.95);
        }
      }

      /* 取消按钮 */
      .cancel-btn {
        background-color: rgba(100, 100, 100, 0.8);
        color: #FFFFFF;
        border: 2rpx solid rgba(255, 255, 255, 0.3);

        &:active {
          background-color: rgba(120, 120, 120, 0.8);
        }
      }

      /* 扔按钮 */
      .throw-btn {
        background: var(--theme-gradient, linear-gradient(135deg, #409EFF, #64BAFF));
        color: #FFFFFF;
        box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.3);

        &:active {
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
        }

        &.disabled {
          opacity: 0.5;
          background: linear-gradient(135deg, #666666, #999999);
          pointer-events: none;
        }
      }
    }
  }
}

/* 弹窗动画 */
@keyframes modal-float {
  0% {
    opacity: 0;
    transform: translateY(50rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 漂浮效果慢脉冲 */
@keyframes pulse-slow {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
}

/* 星星漂浮 */
@keyframes float-star {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.2;
  }
  25% {
    transform: translateY(-15rpx) translateX(5rpx);
    opacity: 0.8;
  }
  50% {
    transform: translateY(0) translateX(10rpx);
    opacity: 0.5;
  }
  75% {
    transform: translateY(15rpx) translateX(5rpx);
    opacity: 0.8;
  }
}

/* 魔法光点移动 */
@keyframes magic-light-move {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(80%, 20%);
  }
  50% {
    transform: translate(100%, 100%);
  }
  75% {
    transform: translate(20%, 80%);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* 迷你瓶子漂浮 */
@keyframes mini-bottle-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5rpx) rotate(5deg);
  }
}

/* 闪烁动画 */
@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
    box-shadow: 0 0 2rpx 0rpx rgba(255, 255, 255, 0.2);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 5rpx 2rpx rgba(255, 255, 255, 0.6);
  }
}
</style>
